<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-notice-bar
      v-if="message.length > 0"
      mode="closeable"
      :text="message"
    ></van-notice-bar>
    <van-row type="flex">
      <van-col span="5">
        <van-image width="76" height="76" radius="38" :src="user.headimgurl" />
      </van-col>
      <van-col span="16">
        <van-cell-group>
          <van-cell :title="user.nickname" :value="user.score">
            <template>
              <span>{{ user.score }}</span>
              <span v-if="user.unused_score > 0">
                + <van-tag type="warning">{{ user.unused_score }}</van-tag>
              </span>
            </template>
          </van-cell>
          <van-cell title="卡号" :value="user.card_num"></van-cell>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-cell v-if="point > 0" title="当前消费积分" :value="point">
      <template>
        <van-tag type="danger"> {{ point }} </van-tag>
      </template>
    </van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="消费积分明细">
        <van-cell
          v-for="item in consumePoints"
          :key="item.id"
          :title="item.score"
          :value="item.update_time"
        />
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { WxConsumePoint, getWxConsumePointList } from "@/api/member";

export default {
  name: "ClientConsumePoint",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  props: ["openid"],
  data() {
    return {
      title: this.$route.meta.title,
      point: 0,
      user: {},
      message: "",
      consumePoints: [],
      loading: false,
      finished: false,
      listQuery: {
        page: 1,
        page_size: 10,
        openid: localStorage.getItem("openid"),
      },
    };
  },
  mounted() {
    this.updateClientPoints();
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        this.getConsumePointsByOpenid();
      }, 500);
    },
    updateClientPoints() {
      const data = {
        openid: this.openid,
        point: this.$route.query.point,
        key: this.$route.query.key,
      };

      WxConsumePoint(data)
        .then((res) => {
          console.log(res);
          const data = res.data;
          if (data.status_code == 200) {
            this.user = data.data;
            this.message = data.message;
            this.point = data.point;
            this.$toast.success(data.message);
          } else {
            this.user = data.data;
            this.message = data.message;
            this.$toast(data.message);
          }
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
    getConsumePointsByOpenid() {
      this.loading = true;
      getWxConsumePointList(this.listQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.consumePoints = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.consumePoints.push(...res.data.results);
          this.loading = false;

          if (this.consumePoints.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取历史数据失败！",
          });
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>